<template>
  <el-select v-model="selectValue" clearable filterable class="ad-city-select"
             :disabled="$attrs.disabled"
             @visible-change="popChange" :filter-method="filterMethod" @change="change">
    <el-option v-for="city in options" :label="city.name" :value="city.code"/>
  </el-select>
</template>

<script>
// 虚拟select https://blog.csdn.net/weixin_42875598/article/details/112910811
// https://gitee.com/zhkumsg/jh-virtual-select
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      selectValue: '',
      searchValue: '',
      hasMatchedOptions: false,
      selectedCity: null,
      newList: [],
      options: [],
      domList: null,
      maxHeightDom: null
    }
  },
  updated() {
    console.log('update')
    this.selectValue = this.searchValue
  },
  mounted() {
    this.init()
    this.resetList()
  },
  computed: {
    ...mapGetters(['allCityData'])
  },
  watch: {
    allCityData() {
      this.init()
      this.resetList()
    },
    selectValue(val) {
      if (!val) {
        this.options = this.allCityData.slice(0, 8)
        // this.domList.style.paddingTop = 0
      }
    }
  },
  methods: {
    resetList() {
      this.newList = this.allCityData.slice()
      this.options = this.allCityData.slice(0, 8)
    },
    init() {
      const adCitySelectDom = this.$el
      const selectDom = adCitySelectDom.querySelector('.ad-city-select .el-select-dropdown .el-select-dropdown__wrap')
      selectDom.style.display = 'flex'
      selectDom.style.flexDirection = 'row'
      this.domList = selectDom.querySelector('.ad-city-select .el-select-dropdown__wrap .el-select-dropdown__list')
      this.maxHeightDom = document.createElement('div')
      this.maxHeightDom.style.height = this.allCityData.length * 34 + 'px'
      this.maxHeightDom.style.width = 0
      this.domList.style.flex = 1
      selectDom.insertBefore(this.maxHeightDom, this.domList)
      selectDom.addEventListener('scroll', () => {
        const scrollTop = selectDom.scrollTop
        const bodyHeight = 34 * 8
        const startIndex = parseInt(scrollTop / 34)
        this.domList.style.paddingTop = scrollTop + 'px'
        const endIndex = startIndex + 8
        this.options = this.newList.slice(startIndex, endIndex)
      })
    },
    popChange(e) {
      // console.log(e)
      // if (!e && !this.s)
      // this.domList.style.paddingTop = 0
    },
    filterMethod(val) {
      this.searchValue = val
      if (val) {
        const reg = new RegExp(val)
        const arrays = this.allCityData.filter(elem => {
          return reg.test(elem.name)
        })
        this.newList = arrays
      } else {
        this.newList = this.allCityData
      }
      this.maxHeightDom.style.height = this.newList.length * 34 + 'px'
      this.options = this.newList.slice(0, 8)
    },
    change(cityCode) {
      this.selectedCity = this.allCityData.filter(city => city.code == cityCode)[0]
      const city = this.selectedCity || {name: '', code: ''}
      this.searchValue = city.name
      this.$emit('input', city.code)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>